* {
	box-sizing: border-box;
	-moz-box-sizing: border-box
}

html {
	font-size: 16px;
	font-weight: 300;
	background-attachment: fixed;
	background-color: white
}

body {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	margin: 0 auto 75px auto;
	padding: 35px 60px 15px 60px;
	max-width: 1024px;
	color: #4e5260;
	line-height: 2
}

body.fullscreen {
	max-width: none
}

@media all and (max-width: 1440px) and (min-width: 1048px) {
	html.toc>body {
		transition: all 1s;
		margin-right: 0 !important;
		width: 80%
	}
	html.toc>body>nav.toc {
		transition: all 1s;
		width: 20%
	}
	html.toc>body h1 {
		text-align: left
	}
}

@media all and (max-width: 1048px) {
	body {
		border: none;
		padding: 10px;
		margin: 0 !important;
		margin-top: 60px !important
	}
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	body {
		margin: 0;
		margin-top: 60px
	}
}

.button, button {
	padding: 10px;
	border-radius: 5px;
	background-color: #4e5160;
	display: inline-block;
	border: none;
	text-decoration: none;
	color: white;
	cursor: pointer
}

.button:hover, button:hover {
	opacity: .9;
	background: #626574
}

.button.green, button.green {
	background-color: #10a54a
}

.button.blue, button.blue {
	background-color: #0f6ab4
}

.button.red, button.red {
	background-color: #f00
}

code, pre, .pre {
	color: green;
	font-family: monospace;
	background-color: #f4f4f4;
	border: 1px solid #e4e4e4;
	word-break: break-word
}

blockquote {
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 15px 50px;
	margin: 0 -50px 35px -50px;
	text-align: justify;
	position: relative
}

body.fullscreen blockquote {
	padding: 15px 60px;
	margin: 0 -60px 35px -60px
}

blockquote {
	font-style: italic;
	border: none
}

blockquote p {
	line-height: inherit
}

blockquote:after, body>form:after {
	margin-top: 1px;
	border-color: #aaa #aaa transparent transparent;
	left: -1px
}

blockquote:before, body>form:before {
	margin-top: 1px;
	border-color: #aaa transparent transparent #aaa;
	right: -1px
}

footer {
	width: 100%;
	bottom: -3em;
	color: black;
	font-size: small;
	text-align: center;
	margin-top: 5em
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	footer {
		position: relative;
		bottom: 0
	}
	footer .pull-right {
		float: none
	}
}

a {
	cursor: pointer;
	color: inherit
}

a.anchor {
	position: relative;
	text-indent: 0;
	text-decoration: none;
	outline: none;
	opacity: 0;
	transition: opacity .3s
}

:hover>a.anchor {
	opacity: .5
}

a.anchor:hover {
	opacity: 1
}

a.anchor:before {
	content: "#";
	position: absolute;
	left: -1em;
	color: inherit;
	vertical-align: middle
}

h1, h2, h3, h4 {
	font-weight: 300
}

h1:target, h2:target, h3:target, h4:target {
	-webkit-animation: slideInDown 0.3s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) alternate, fadeIn 0.3s
		cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: slideInDown 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
		alternate, fadeIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

h1 {
	margin-top: 2em;
	padding: 1em 0;
	font-size: 4em;
	text-align: center
}

h1:before {
	position: absolute;
	padding: inherit;
	margin-top: -1em;
	left: 0;
	right: 0;
	height: 2em;
	background: #eee;
	z-index: -1;
	content: ''
}

h1:first-of-type {
	margin-top: 0
}

h2 {
	border-bottom: 1px solid #dcdcdc;
	margin: 1.5em -50px;
	padding-left: 50px;
	padding-right: 50px;
	background: #52b0fa;
	color: #fff
}

body>form {
	margin: 0 -60px 20px;
	padding: 20px 60px;
	background-color: #fafa52;
	box-shadow: 0 10px 10px -10px #000;
	position: relative
}

body>form>h4, body>form>h3, body>form>h2 {
	margin-top: 0;
	padding-top: 0
}

q {
	color: green
}

i {
	color: blue
}

@media all and (max-width: 1048px) {
	blockquote, body>form {
		padding: 10px;
		margin: 0
	}
	h1 {
		font-size: 3em
	}
	h2 {
		margin-left: -10px;
		margin-right: -10px;
		max-width: none
	}
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	* {
		max-width: 100%
	}
	h1 {
		text-align: center;
		text-indent: 0;
		font-size: 2em
	}
	h2 {
		text-indent: 0;
		padding: 10px
	}
	pre, .pre {
		overflow-x: auto
	}
}

.hide {
	display: none
}

pre, .pre {
	display: block;
	border-left-width: 10px;
	white-space: pre;
	padding: 15px;
	margin: 0 0 35px 0;
	max-width: 100%;
	overflow: auto;
	word-wrap: normal;
	-moz-tab-size: 2;
	-ms-tab-size: 2;
	tab-size: 2
}

@media all and (max-width: 1048px) {
	pre, .pre {
		font-size: .9em
	}
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	pre, .pre {
		margin: 0 -10px;
		width: auto;
		max-width: none;
		font-size: .7em
	}
}

pre[title].before, .pre[title].before, pre[title]:before, .pre[title]:before
	{
	position: absolute;
	margin-top: -30px;
	content: attr(title);
	background: #e4e4e5;
	margin-left: -25px;
	padding: 0 10px
}

prepre:empty:before, .prepre:empty:before {
	content: "[waiting for it]";
	color: #4e5160
}

pre[contenteditable], .pre[contenteditable] {
	position: relative
}

pre[contenteditable]:focus, .pre[contenteditable]:focus {
	color: black;
	background-color: white
}

pre[contenteditable]:after, .pre[contenteditable]:after {
	content: "edit";
	position: absolute;
	top: 0;
	right: 0;
	color: red;
	background-color: #e4e4e4;
	padding: 0 10px
}

pre[contenteditable]:focus:after, .pre[contenteditable]:focus:after {
	background-color: white
}

pre+button, .pre+button {
	margin-top: -60px;
	position: absolute
}

pre.tryit, .pre.tryit, pre.tryitoffline, .pre.tryitoffline {
	margin-bottom: 50px
}

pre .str, .pre .str {
	color: #080
}

pre .kwd, .pre .kwd {
	color: #008
}

pre .com, .pre .com {
	color: #800
}

pre .typ, .pre .typ {
	color: #606
}

pre .lit, .pre .lit {
	color: #066
}

pre .pun, .pre .pun {
	color: #660
}

pre .pln, .pre .pln {
	color: #000
}

pre .tag, .pre .tag {
	color: #008
}

pre .atn, .pre .atn {
	color: #606
}

pre .atv, .pre .atv {
	color: #080
}

pre .dec, .pre .dec {
	color: #606
}

script.pre:not (:empty ):after {
	display: block;
	content: "</script>";
	color: #a4a4a5
}

script.pre:not (:empty ):before {
	content: "<script>";
	color: #a4a4a5
}

script.pre[type]:after {
	content: none
}

script.pre[type]:before {
	content: "<" attr(type) ">";
	color: #a4a4a5
}

script.pre[src]:after {
	content: "<script src='" attr(src) "'></script>"
}

script.pre[src], link.pre[src] {
	cursor: pointer
}

script.pre[src]:hover, link.pre[src]:hover {
	text-decoration: underline
}

style.pre:before {
	content: "/* CSS stylesheet */";
	color: #a4a4a5
}

link.pre:after {
	content: "<link href='" attr(href) "' rel='stylesheet'/>"
}

table, .table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	background-color: inherit
}

@media all and (max-width: 1048px) {
	table, .table {
		font-size: .9em
	}
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	table, .table {
		font-size: .7em;
		display: block;
		overflow: auto;
		margin: 0 -10px;
		padding: 0 10px;
		width: auto;
		max-width: none
	}
}

.table {
	display: table
}

.table-header {
	display: table-header-group
}

.table-footer {
	display: table-footer-group
}

.table-body {
	display: table-row-group
}

.table-row {
	display: table-row
}

table thead th div {
	margin: 0 auto;
	background: url("images/browsers.png") no-repeat top left;
	width: 25px;
	height: 25px
}

div.ie6 {
	background-position: 0 0
}

div.ie7, div.ie8 {
	background-position: -25px 0
}

div.ie9, div.ie10 {
	background-position: -50px 0
}

div.ff {
	background-position: 0 -25px
}

div.op {
	background-position: 0 -50px
}

div.cr {
	background-position: 0 -75px
}

div.sa {
	background-position: 0 -100px
}

tr.break th, .table-row.break th, .table-header tr.break .table-cell,
	.table-header .table-row.break .table-cell {
	background-color: #f8f8f8
}

tr.break:first-child, .table-row.break:first-child {
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	vertical-align: middle
}

tr.break:last-child, .table-row.break:last-child {
	border-left: 0
}

td, th, .table-cell {
	text-align: left;
	border-bottom: 1px solid #d2d2d2;
	padding: 4px 10px 4px 6px;
	vertical-align: top
}

thead td, th, .table-header .table-cell {
	border-bottom-width: 3px
}

table td pre, .table-cell pre {
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none
}

td.yes, td.no {
	vertical-align: middle
}

.yes:before, .no:before {
	color: white;
	text-transform: uppercase;
	display: inline-block;
	border-radius: 5px;
	padding: 3px 10px
}

.yes:before {
	content: "\02714";
	background-color: #10a54a
}

.no:before {
	content: "\02716";
	background-color: red
}

tbody th {
	padding-left: 10px
}

thead+tbody tr th, tbody tr:not (:first-child ) th {
	border-bottom-width: 1px
}

tbody th p {
	font-weight: normal
}

td.partial, span.partial {
	background-color: #20a84d
}

.toolbar {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform-origin: 0 0;
	transform: translate3d(0, 0, 0);
	transform-origin: 0 0;
	-webkit-animation: slideInDown 0.3s
		cubic-bezier(0.68, -0.55, 0.265, 1.55) alternate, fadeIn 0.3s
		cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation: slideInDown 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
		alternate, fadeIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	background-color: black;
	color: white;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row;
	flex-flow: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	left: 0;
	margin: 0;
	padding: 10px;
	position: fixed;
	text-align: right;
	top: 0;
	width: 100%;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	overflow-x: auto
}

.toolbar>:last-child {
	text-align: right;
	margin-left: 20px
}

.toolbar>:first-child {
	float: left;
	text-align: left;
	padding-left: 40px
}

.toolbar>* {
	flex: 1 0 auto;
	white-space: normal;
	display: inline-block
}

.toolbar:after {
	content: "";
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	bottom: -2px
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	.toolbar {
		transition: -webkit-transform 1s;
		transition: transform 1s
	}
	.toolbar #adorn-edit {
		display: none
	}
	.toolbar #adorn-edit+* {
		display: none
	}
}

.breadcrumbs>a {
	display: inline-block;
	transition: all .3s ease-in
}

.breadcrumbs>a:before {
	content: '/';
	vertical-align: middle
}

.breadcrumbs>a:first-child:before {
	content: none
}

.breadcrumbs>a>img {
	margin: -5px 10px -5px 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	height: 36px;
	vertical-align: middle;
	width: 36px;
	transition: all .3s
}

.breadcrumbs>a>img:hover {
	-webkit-transform: scale(2.5);
	-webkit-transform-origin: 50% 50%;
	transform: scale(2.5);
	transform-origin: 50% 50%;
	filter: none
}

.breadcrumbs>a:hover ~a{
	transition: all 1s ease-in;
	-webkit-transform: translateX(50px);
	-webkit-transform-origin: 0 0;
	transform: translateX(50px);
	transform-origin: 0 0;
	opacity: 0;
	filter: alpha(opacity = 0)
}

.breadcrumbs>a:last-child {
	text-decoration: none;
	color: #e7e7e7
}

.webkit {
	content: '';
}

@
-webkit-keyframes slideInDown {
	from {transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
}

}
.key {
	content: '';
}

@
keyframes slideInDown {
	from {transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
}

}
.webkit {
	content: '';
}

@
-webkit-keyframes slideInUp {
	from {transform: translateY(100px);
	-webkit-transform: translateY(100px);
}

}
.key {
	content: '';
}

@
keyframes slideInUp {
	from {transform: translateY(100px);
	-webkit-transform: translateY(100px);
}

}
.webkit {
	content: '';
}

@
-webkit-keyframes slideInRight {
	from {transform: translateX(-200px);
	-webkit-transform: translateX(-200px);
}

50%
{
transform
:
 
translateX
(-200px);-webkit-transform
:
 
translateX
(-200px);
}
}
.key {
	content: '';
}

@
keyframes slideInRight {
	from {transform: translateX(-200px);
	-webkit-transform: translateX(-200px);
}

50%
{
transform
:
 
translateX
(-200px);-webkit-transform
:
 
translateX
(-200px);
}
}
.webkit {
	content: '';
}

@
-webkit-keyframes slideOutRight {
	to {transform: translateX(100px);
	-webkit-transform: translateX(100px);
}

}
.key {
	content: '';
}

@
keyframes slideOutRight {
	to {transform: translateX(100px);
	-webkit-transform: translateX(100px);
}

}
.webkit {
	content: '';
}

@
-webkit-keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}

}
.key {
	content: '';
}

@
keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}

}
.webkit {
	content: '';
}

@
-webkit-keyframes fadeOut {
	to {opacity: 0;
}

}
.key {
	content: '';
}

@
keyframes fadeOut {
	to {opacity: 0;
}

}
nav.toc {
	position: absolute;
	left: 0;
	width: 200px;
	width: calc(50% - 512px);
	max-width: 250px;
	text-align: left;
	font-weight: 300;
	z-index: 0;
	padding-right: 0;
	font-size: 1.3em;
	overflow: auto;
	background-color: #eee
}

nav.toc.float {
	bottom: 0;
	position: fixed;
	top: 50px
}

nav.toc:before {
	content: "on this page:";
	font-weight: bold;
	display: block;
	padding: 0 10px
}

nav.toc>a {
	display: none
}

nav.toc ul {
	margin: 0;
	padding: 0
}

nav.toc>ul>li {
	font-size: .8em;
	list-style: none;
	position: relative;
	opacity: 0;
	-webkit-transform: translate3d(-200px, 0, 0);
	-webkit-transform-origin: 0 0;
	transform: translate3d(-200px, 0, 0);
	transform-origin: 0 0;
	transition: -webkit-transform 0.3s, opacity 1s;
	transition: transform 0.3s, opacity 1s
}

html.toc nav.toc>ul>li {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform-origin: 0 0;
	transform: translate3d(0, 0, 0);
	transform-origin: 0 0
}

nav.toc>ul>li>a {
	text-decoration: underline
}

nav.toc>ul>li>a.H1 {
	font-weight: bold
}

nav.toc>ul>li>a.H2 {
	font-size: .8em;
	text-decoration: none !important
}

nav.toc>ul>li.active {
	transition-delay: 0;
	background: #52b0fa;
	background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0,
		transparent 10px);
	color: white
}

nav.toc>ul>li:nth-child( 30n+30) {
	transition-delay: 3s
}

nav.toc>ul>li:nth-child( 30n+29) {
	transition-delay: 2.9s
}

nav.toc>ul>li:nth-child( 30n+28) {
	transition-delay: 2.8s
}

nav.toc>ul>li:nth-child( 30n+27) {
	transition-delay: 2.7s
}

nav.toc>ul>li:nth-child( 30n+26) {
	transition-delay: 2.6s
}

nav.toc>ul>li:nth-child( 30n+25) {
	transition-delay: 2.5s
}

nav.toc>ul>li:nth-child( 30n+24) {
	transition-delay: 2.4s
}

nav.toc>ul>li:nth-child( 30n+23) {
	transition-delay: 2.3s
}

nav.toc>ul>li:nth-child( 30n+22) {
	transition-delay: 2.2s
}

nav.toc>ul>li:nth-child( 30n+21) {
	transition-delay: 2.1s
}

nav.toc>ul>li:nth-child( 30n+20) {
	transition-delay: 2s
}

nav.toc>ul>li:nth-child( 30n+19) {
	transition-delay: 1.9s
}

nav.toc>ul>li:nth-child( 30n+18) {
	transition-delay: 1.8s
}

nav.toc>ul>li:nth-child( 30n+17) {
	transition-delay: 1.7s
}

nav.toc>ul>li:nth-child( 30n+16) {
	transition-delay: 1.6s
}

nav.toc>ul>li:nth-child( 30n+15) {
	transition-delay: 1.5s
}

nav.toc>ul>li:nth-child( 30n+14) {
	transition-delay: 1.4s
}

nav.toc>ul>li:nth-child( 30n+13) {
	transition-delay: 1.3s
}

nav.toc>ul>li:nth-child( 30n+12) {
	transition-delay: 1.2s
}

nav.toc>ul>li:nth-child( 30n+11) {
	transition-delay: 1.1s
}

nav.toc>ul>li:nth-child( 30n+10) {
	transition-delay: 1s
}

nav.toc>ul>li:nth-child( 30n+9) {
	transition-delay: .9s
}

nav.toc>ul>li:nth-child( 30n+8) {
	transition-delay: .8s
}

nav.toc>ul>li:nth-child( 30n+7) {
	transition-delay: .7s
}

nav.toc>ul>li:nth-child( 30n+6) {
	transition-delay: .6s
}

nav.toc>ul>li:nth-child( 30n+5) {
	transition-delay: .5s
}

nav.toc>ul>li:nth-child( 30n+4) {
	transition-delay: .4s
}

nav.toc>ul>li:nth-child( 30n+3) {
	transition-delay: .3s
}

nav.toc>ul>li:nth-child( 30n+2) {
	transition-delay: .2s
}

nav.toc>ul>li:nth-child( 30n+1) {
	transition-delay: .1s
}

nav.toc>ul>li>a {
	color: inherit;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	padding: 4px 10px
}

@media all and (min-width: 1440px) {
	nav.toc>ul>li>a {
		padding-left: 30px
	}
}

@media all and (max-width: 1048px) {
	nav.toc {
		background: none;
		bottom: auto !important;
		color: inherit;
		height: auto;
		left: 0;
		margin-left: 0 !important;
		max-height: 100%;
		overflow: auto;
		padding: 0;
		position: fixed;
		text-align: left;
		top: 0 !important;
		width: auto;
		z-index: 1
	}
	nav.toc>ul>li {
		-webkit-animation: none;
		animation: none
	}
	nav.toc>ul>li.active:after {
		display: none
	}
	nav.toc:before {
		display: none
	}
	nav.toc>a {
		display: inline-block;
		width: 1em;
		background: #000;
		height: .2em;
		margin: 1em .5em;
		position: relative;
		font-size: 1em;
		background: white
	}
	nav.toc>a:before, nav.toc>a:after {
		transition: all .5s;
		content: " ";
		width: inherit;
		height: inherit;
		background: inherit;
		top: .3em;
		position: absolute
	}
	nav.toc>a:after {
		top: auto;
		bottom: .3em
	}
	nav.toc>ul {
		display: none
	}
	.no-touch nav.toc:hover, .touch nav.toc.focus {
		bottom: 0;
		width: 200px;
		transition: width .3s;
		background-color: #eee;
		background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.05) 0,
			transparent 5px);
		overflow: auto
	}
	.no-touch nav.toc:hover>a, .touch nav.toc.focus>a {
		background-color: transparent
	}
	.no-touch nav.toc:hover>a:before, .touch nav.toc.focus>a:before,
		.no-touch nav.toc:hover>a:after, .touch nav.toc.focus>a:after {
		background-color: black
	}
	.no-touch nav.toc:hover>a:before, .touch nav.toc.focus>a:before {
		-webkit-transform: rotate(45deg);
		-webkit-transform-origin: 50% 50%;
		transform: rotate(45deg);
		transform-origin: 50% 50%
	}
	.no-touch nav.toc:hover>a:after, .touch nav.toc.focus>a:after {
		-webkit-transform: rotate(-45deg);
		-webkit-transform-origin: 50% 50%;
		transform: rotate(-45deg);
		transform-origin: 50% 50%
	}
	.no-touch nav.toc:hover>ul, .touch nav.toc.focus>ul {
		display: block;
		padding-right: 0
	}
}

@media all and (max-width:400px) {
	ul {
		padding-left: 20px
	}
}

.clearfix {
	display: inline-block
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0
}

* html .clearfix {
	height: 1%
}

.clearfix {
	display: block
}

.icon-github {
	color: inherit;
	display: inline-block;
	font-style: normal;
	text-decoration: inherit
}

.icon-github:after {
	content: "GitHub"
}

.icon-twitter {
	background:
		url("")
		no-repeat center center;
	background-size: 1em;
	width: 1em;
	height: 1em;
	font-size: 1.5em;
	vertical-align: middle;
	display: inline-block
}

.speeach-bubble {
	color: #444;
	margin-left: 5px;
	position: relative;
	line-height: 1;
	text-align: center;
	display: inline-block;
	background-color: white;
	border: 1px solid #444;
	color: black;
	border-radius: 15%;
	padding: 5px;
	transition: all .3s cubic-bezier(.68, -0.55, .265, 1.55)
}

.speeach-bubble:before, .speeach-bubble:after {
	position: absolute;
	left: -6px;
	bottom: 5px;
	content: " ";
	width: 0;
	height: 0;
	padding: 0;
	border: 5px solid transparent;
	border-width: 3.5px 5px;
	border-right-color: inherit;
	border-left-width: 0
}

.speeach-bubble:after {
	border-right-color: white;
	left: -4px;
	border-width: 2.975px 4.25px;
	border-left-width: 0;
	bottom: 5.5px
}

.speeach-bubble:empty {
	-webkit-transform: scale(.01);
	-webkit-transform-origin: 50% 50%;
	transform: scale(.01);
	transform-origin: 50% 50%;
	opacity: 0
}

.pull-right {
	float: right
}

.pull-left {
	float: left
}

.period {
	margin: 0 20px
}

.period:after {
	content: "\022C5"
}

@media all and (max-width: 650px) , screen and (max-device-width: 480px)
	{
	.period {
		margin: 0 2px
	}
}